<template>
	<view class="cell-group">
		<view class="cell" v-if="item.is_show==false" @click="box_btn">
			<view class="u-flex-x" @click.stop="change_state"  style="align-items: center;">
				<image :src="result_state()" v-if="(is_audit=='审核'||is_audit=='编辑')&&this.item.is_audit"
					style="width:36rpx;height:36rpx;margin-right: 24rpx;"></image>
				<text class="label">{{item.title}}</text>
			</view>
			<view class="u-flex-xy-center">
				<text class="name name1"
					v-if="inclouds(['datetime','date'],item.modality)">{{result(modelValue,item.modality)}}</text>
				
				<text class="name name1"
						v-else-if="inclouds(['multipleSelection'],item.modality)">{{result_format(modelValue)}}</text>
				<text class="name" v-else>{{ modelValue }}</text>
				<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E9%80%89%E6%8B%A9%20%E6%8B%B7%E8%B4%9D%2034.png" v-if="!item.rightIcon" class="icon_right"></image>
			</view>
		</view>
		
		<u-picker :immediateChange="immediateChange" v-if="inclouds(['radio','radio_section','address_picker','multipleSelectionAddress'],item.modality)&& pickerVisible" :show="pickerVisible"
			:defaultIndex="item.defaultIndex" @close="close" closeOnClickOverlay :columns="get_columns(item)"
			:itemHeight="80" :title="item.title" @cancel="close" keyName="name" @change="changeHandler"
			@confirm="confirm_prcker" :showToolbar="showToolbar"></u-picker>
		<u-popup :show="pickerVisible" mode="bottom" round="20"
			v-if="inclouds(['input','add_input','textarea','input-radio','multipleSelection'],item.modality)&& pickerVisible" @close="close()"
			@cancel="close()">
			<yy-input @close="close()" v-model='modelValue' :config="item">
			</yy-input>
		</u-popup>
		<u-popup :show="pickerVisible1" mode="bottom" round="20"
			v-if="inclouds(['multipleSelectionAddress'],item.modality)&& pickerVisible1" @close="pickerVisible1=false"
			@cancel="pickerVisible1=false">
		<view class="content">
			<view class="u-flex-between u-flex title" :style="{'padding-bottom':item.long_title?'0 !important':''}">
				
				<text @click="pickerVisible1=false">取消</text>
				<text class="name">{{item.title}}</text>
				<text style="color: #FF7612;" @click="submit">提交</text>
			</view>
			<text class="long_title" v-if="item.long_title">{{item.long_title}}</text>
			<view class="list">
				<view class="item u-flex-xy-center" v-for="(it,index) in item.brray" :key="index">
					<text>{{it}}</text>
					<image :src="`${$http_cos}/static/delate.png`"  @click="delate(it,index)"></image>
				</view>
			</view>
			<view class="submit" @click="add_adress">
				<text>添加</text>
			</view>
		</view>
		</u-popup>
		<!-- item.maxDate item.minDate-->
		<u-datetime-picker v-if="inclouds(['datetime','date'],item.modality) && pickerVisible" v-model="modelValue" :show="pickerVisible"
			:mode="item.modality" :itemHeight="80" :title="item.title" @close="close()" @cancel="close()" @confirm="confirm_data"
			 closeOnClickOverlay :maxDate="1988121600000" :minDate="31507200000"
			:showToolbar="showToolbar" />
	</view>
</template>

<script>
	import {
		getAddress
	} from '@/common/api.js'
	import {
		address
	} from '@/util/address.js'
	export default {
		props: {
			value: {
				type: [Number, String, Array],
				default: () => {}
			},
			config: {
				type: Object,
				default: () => {}
			},
			is_audit: {
				type: String,
				default: () => {}
			}
		},
		data() {
			return {
				immediateChange:true,
				pickerVisible1:false,
				columns: [],
				showToolbar: false,
				item: this.config,
				pickerVisible: false,
				defaultIndex: [0],
				address: address
			}
		},
		computed: {
			modelValue: {
				get() {
					return this.value
				},
				set(value) {
					
					this.$emit('input', value)
				}
			},

		},
		beforeMount() {},
		beforeCreate() {

		},
		mounted() {

		},
		watch: {
			pickerVisible1(value){
				if(value==true){
					if(this.modelValue==''){
						return
					}
					let brr=this.modelValue.split(",")
					this.item.brray=brr
				}
			},
			pickerVisible(value) {
				
				if (value == true) {
					if (this.modelValue === undefined||this.modelValue=='') {
						return
					}
					if (this.inclouds(['radio', 'radio_section', 'address_picker'], this.item.modality)) {	
						
						this.$nextTick(()=>{
							this.item.defaultIndex = this.init()
						})
					}
					if (this.inclouds(['add_input'], this.item.modality)) {
						this.item.array = this.modelValue.split('/')
					}
				}
			}
		},
		methods: {
			delate(it,index){
				this.item.brray.splice(index,1)
			},
			submit(){
					this.modelValue=this.item.brray.join()
					this.pickerVisible1 = false
			},
			add_adress(){
				this.pickerVisible1 = false
				this.pickerVisible = true
			this.item.array =this.initDataPicker(this.address, [0,0,0])
			},
			result_format(item){
					return  item.replace(/\,/g, '/')
			},
			box_btn() {
				if(this.is_audit==''&&this.item.title=='权限'){
					return
				}
				if(this.item.modality=='multipleSelectionAddress'){
					this.pickerVisible1=true
					return
				}
				this.pickerVisible = true
			},
			change_state() {
				if (this.item.is_audit == 1) {
					return
				} else if (this.item.is_audit == 2) {
					this.item.is_audit = 3
				} else if (this.item.is_audit == 3) {
					this.item.is_audit = 2
				}
				this.$emit('change_item', this.item)
			},
			result_state() {
				let url = ''
				if (this.item.is_audit == 1) {
					url = 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/1%20%283%29.png'
				} else if (this.item.is_audit == 2) {
					url = 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/2%20%284%29.png'
				} else if (this.item.is_audit == 3) {
					url = 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/3%20%283%29.png'
				}
				return url
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			currentTime(type, time_difference) {
				let data = new Date()
				let year = data.getFullYear()
				let time = ''
				// console.log(this.item.fieldName)
				if (this.item.fieldName == 'birthday' || this.item.fieldName == 'nlBirthday') {
					if (type == 'maxDate') {
						time = (year - time_difference) + '-12-31 00:00:00'
				
					} else if (type == 'minDate') {
						time = (year - time_difference) + '-01-01 00:00:00'
					}
				} else if (this.item.fieldName == 'time') {
					data.setTime(data.getTime() + 24 * 60 * 60 * 1000);
					let month=(data.getMonth() + 1)<10?'0'+(data.getMonth() + 1):(data.getMonth() + 1)
					let day=data.getDate()<10?'0'+data.getDate():data.getDate()
					if (type == 'maxDate') {
						 time =(year+2)+"-" + month+ "-" + day +' '+'00:00:00';
					} else if (type == 'minDate') {
						time =year+"-" + month + "-" + day +' '+'00:00:00';
					}
				}
				let timeS = new Date(time.replace(/-/g, '/')).getTime()
				console.log(timeS)
				return timeS
			},
			init() {
				let defaultIndex = []
				let brr=this.modelValue.toString().split('-')
				let arr =this.item.array[0]
				let address = this.address
				if (this.item.modality == 'radio') {
					this.item.array.forEach((item, index) => {
						if (item.name == this.modelValue||this.modelValue.indexOf(item.name)!=-1) {
							defaultIndex = [index]
							return defaultIndex
						}

					})
				} else if (this.item.modality == 'radio_section') {
					
					let min = 0
					let list = arr.map(item => {
						return item.name
					})
					list.forEach((item, index) => {
						if (item == brr[0]) {
							if (Number(arr[index].name) == this.item.max) {
								min = Number(arr[index].name)
							} else {
								min = Number(arr[index].name) + 1
							}
							defaultIndex.push(index)
						}
					})
					let max_list = this.ages_or_heights(min, this.item.max)
					this.item.array = [arr, max_list]
					this.ages_or_heights(min, this.item.max).forEach((it, i) => {
						if (it.name == brr[1]) {
							defaultIndex.push(i)
						}
					})
				} else if (this.item.modality == 'address_picker'||this.item.modality == 'multipleSelectionAddress') {

					address.forEach((item, index) => {
						if (item.name == brr[0]) {
							defaultIndex.push(index)
						}
					})
					address[defaultIndex[0]].children.forEach((item, index) => {
						if (item.name == brr[1]) {
							defaultIndex.push(index)
						}
					})
					address[defaultIndex[0]].children[defaultIndex[1]].children.forEach((item, index) => {
						if (item.name == brr[2]) {
							defaultIndex.push(index)
						}
					})
					this.item.array = this.initDataPicker(this.address, defaultIndex)
				}
				return defaultIndex
				// this.item.defaultIndex = defaultIndex


			},
			initDataPicker(address, defaultIndex) {
				let province = []; //初始数据需要展示的省份
				let province1 = []; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
				let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
				province = address.map(item => {
					return {
						name: item.name,
						provinceId: item.provinceId,
						value: item.value
					}
				})
				province1 = address[defaultIndex[0]].children.map(item => {
					return {
						name: item.name,
						provinceId: item.provinceId,
						value: item.value,
						cityId: item.cityId
					}
				})
				province2 = address[defaultIndex[0]].children[defaultIndex[1]].children.map(its => {
					return {
						name: its.name,
						value: its.value,
						countyId: its.countyId,
						cityId: its.cityId
					}
				})
				return [province, province1, province2]

			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					values,
					picker = this.$refs.uRegion
				} = e

				let arr = this.item.array
				let columns = []
				let columns_two = []
				let one_index = indexs[0]
				let two_index = indexs[1]
				if (this.item.modality == 'radio_section') {
					let min = ''
					if (Number(arr[0][one_index].name) == this.item.max) {
						min = Number(arr[0][one_index].name)
					} else {
						min = Number(arr[0][one_index].name) + 1
					}
					this.item.array = [this.item.array[0], this.ages_or_heights(min, this.item.max)]

				} else if (this.item.modality == 'address_picker'||this.item.modality == 'multipleSelectionAddress') {

					// console.log(this.address)
					this.address[one_index].children.forEach(el => {
						columns.push({
							name: el.name,
							provinceId: el.provinceId,
							value: el.value
						});
					});
					this.address[one_index].children[two_index].children.forEach(el => {
						columns_two.push({
							name: el.name,
							value: el.value,
							countyId: el.countyId,
							cityId: el.cityId
						});
					});
					this.item.array = this.initDataPicker(this.address, indexs)
					// this.item.array = [this.item.array[0], columns, columns_two]

				}
				if (columnIndex === 0) {
					picker.setColumnValues(index, 0, 0)
				} else if (columnIndex === 1) {
					picker.setColumnValues(indexs[0], indexs[1], 0); //同上
				}
				this.$forceUpdate()

				// this.confirm_prcker()
			},
			ages_or_heights(min, max) {
				let arr = []

				for (let i = min; i <= max; i++) {
					arr.push({
						name: i
					})
				}
				return arr
			},
			get_columns(item) {
				
				if (item.array) {
					if (item.array.length > 0) {
						let isarr = this.isArray(item.array)
						if (isarr) {
							return item.array
						} else {
							return [item.array]
						}
					} else if (item.array.length == 0) {
						if (item.modality == 'radio_section') {
							item.array = this.get_interval(item.min, item.max)
							return this.get_interval(item.min, item.max)
						} else if (item.modality == 'address_picker'||item.modality=='multipleSelectionAddress') {
							
							item.array = this.initDataPicker(this.address, item.defaultIndex)
							return this.initDataPicker(this.address, item.defaultIndex)
						} else {
							return []
						}
					} else {
						return []
					}
				} else {
					return []
				}

			},
			isArray(array) {
				let str1 = true
				// let str2 = '一维'
				for (let i of array) {
					if (Array.isArray(i))
						return true
				}
				return false
			},
			get_interval(min, max) {
				let arr = []
				let brr = []

				for (let i = min; i <= max; i++) {
					arr.push({
						name: i
					})
					if (i > min) {
						brr.push({
							name: i
						})
					}
				}
				let crr = [arr, brr]
				return crr
			},
			result_text(val, item) {
				return item
			},
			close() {
				this.pickerVisible = false
			},
			change_indput(value) {
				this.modelValue = value
			},
			inclouds(arr, item) {
				return arr.indexOf(item) != -1
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				if (time == undefined || time == '') {
					return ''
				}
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			confirm_prcker(e) {
				if (this.item.modality == 'radio') {
					let name=''
					if(this.item.title=='权限'){
					let days=e.value[0].days==0?'(无限期)':e.value[0].days
						name= e.value[0].name+(days)
							
					}else{
						name = e.value[0].name
						
					}
					this.modelValue=name
					this.$emit('change_list', {
						name: e.value[0].name,
						obj: this.item
					})
				} else if (this.item.modality == 'address_picker' || this.item.modality == 'radio_section') {
					let arr = e.value.map(item => {
						return item.name
					})
					this.modelValue = arr.join('-')
				}else if(this.item.modality == 'multipleSelectionAddress'){
					let array=this.item.brray
					let is_exist=false
					if(this.item.brray.length==0){
						array.push(e.value[2].name)	
					}else{
						this.item.brray.forEach(item=>{
							if(item==e.value[2].name){
								is_exist=true
								return
							}
						})
						if(is_exist==true){
							uni.$u.toast('区已存在,请选择其他区查询')
						}else{
							array.push(e.value[2].name)	
						}
						this.item.brray=array
						this.modelValue=array.join()
					}
					this.pickerVisible1=true
				}

				this.confirm_data()
			},
			confirm_data(e) {
				this.pickerVisible = false
			}
		}
	}
</script>


<style lang="scss">
	.cell-group {
		width: 100%;

		.cell {
			background-color: #fff;
			// margin-bottom: 20rpx;
			border-radius: 16rpx;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx 0 33rpx;
			    width: 100%;
			    box-sizing: border-box;
			.label {
				color: #111111;
				
				flex: 1;
			}

			text {
				font-size: 28rpx;
			}

			.name {
				color: #929191;
				
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap;  // 默认不换行；
				color: #929191;
				display: block;
				max-width: 360rpx;
				text-align: right;
				width:auto;
			}
			
		}
		.content {
			padding: 0 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			height: auto;
			max-height: 983rpx;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			.long_title{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #919191;
				display: block;
				padding:16rpx 0 24rpx ;
				box-sizing: border-box;
				text-align: center;
			}
			.title {
				padding: 50rpx 0 50rpx;
				box-sizing: border-box;
				position: relative;
		
				text {
					font-size: 34rpx;
					font-weight: 400;
					color: #111111;
				}
		
				.open_popover {
					width: 32rpx;
					height: 32rpx;
					// position: absolute;
					// right: 8rpx;
		
				}
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				.item{
					height:80rpx;
					width: auto;
					padding:0 32rpx;
					box-sizing: border-box;
					background-color: #FFEEE2;
					border-radius: 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					text{
						color: #FF7612;
						font-size: 34rpx;
						display: block;
						margin-right: 32rpx;
					}
					image{
						width:25rpx;
						height:25rpx;
					}
				}
			}
			.submit {
				width: 100%;
				height: 108rpx;
				background: #FF7612;
				border-radius: 54rpx;
				color: #fff;
				text-align: center;
				line-height: 108rpx;
				margin: 56rpx auto 100rpx;
				box-sizing: border-box;
		
				text {
					font-size: 30rpx;
				}
			}
		}
	}
</style>
